<template>
	<scroll-view :scroll-y="true" @scrolltolower="getData" lower-threshold="80" class="content">
		<view class="content_top">
			<image class="content_top_bj" mode="widthFix" src="../static/image/cktxlbanner.png"></image>
			<view class="content_top_box">
				<view class="content_top_box_admin"> </view>
				<view class="content_top_box_name">{{info.txlname}}</view>
				<view class="content_top_box_text" v-if="istab=='0'">成员：{{info.inherecount}}人 浏览数：{{info.viewcount}}
				</view>
				<view class="content_top_box_text" v-if="istab=='0'">{{info.txllabels}}</view>
				<view class="content_top_box_text" v-if="istab=='1'">成员：{{info.inherecount}}人 发起人：Mr、赵</view>
			</view>
			<view class="content_top_box_bottom">
				<view v-for="(v,k) in tab" :key="k" :class="['nav',istab==k?'is':'']" @click="setTab(k)">{{v}}</view>
			</view>
		</view>
		<view class="content_box">
			<view class="content_box_cy" v-if="istab=='0'">
				<view class="content_box_cy_sousuo">
					<input type="text" v-model="searchkey" @confirm="sousuo" placeholder="搜索成员" />
					<image src="/comm/static/image/fdj.png" @click="sousuo"></image>
				</view>
				<view class="content_box_cy_list">
					<view class="list" v-for="(v,k) in newList" :key="k">
						<view class="user">
							<image class="userimg" mode="aspectFit" :src="v.headerimg"
								@click="link('/comm/card/card?userid='+v.userid+'&txlid='+id)"></image>
							<view class="right">
								<view class="news" @click="link('/comm/card/card?userid='+v.userid+'&txlid='+id)">
									<view class="name overflow1">
										<text>{{v.username}}</text>{{v.zhiwei}} {{v.creator=='yes'?'创建人':''}}
									</view>
									<view class="text">{{v.company}}</view>
								</view>
								<view class="tab">
									<image @click="tel(v.shouji)" src="/comm/static/image/tel2.png"></image>
									<image v-if="v.canaddmyfriend=='yes'" src="/comm/static/image/jiaoh.png"
										@click="isadd(k)"></image>
									<image v-else src="/comm/static/image/jiaohno.png"></image>
								</view>
							</view>
						</view>
						<view class="bottom">
							<view class="tab1">
								<image src="/comm/static/image/zhuanchang.png"></image>
								<text>{{v.SpecializedSkill}}</text>
							</view>
							<view class="tab2" v-if="v.ResidentCity">
								{{v.ResidentCity}}
							</view>
						</view>
					</view>
				</view>
				<view class="content_box_cy_bottom" v-if="!addUser">
					<view class="button" @click="tgShow = true">我要推广</view>
				</view>
			</view>
			<view class="content_box_sq" v-if="istab=='1'">
				<view class="list" v-for="(v,k) in newList" :key="k">
					<view class="user">
						<image mode="aspectFit" class="userimg" :src="v.headerimg">
						</image>
						<view class="right">
							<view class="news" @click="link('/comm/card/card?userid='+v.userid+'&txlid='+id)">
								<view class="name overflow1">
									<text>{{v.username}}</text>
									{{v.company}}
								</view>
								<view class="text">
									{{v.ResidentCity}} {{v.zhiwei}}
								</view>
							</view>
							<view v-if="!addUser" class="set" @click="showSet(k)">
								<uv-icon name="setting-fill" color="#999" size="18"></uv-icon>
								<text>设置</text>
							</view>
						</view>
					</view>
					<view class="bottomtext" @click="link('/comm/trendsinfo/trendsinfo?id='+v.commid)">
						{{v.content}}
					</view>
					<view @click="link('/comm/trendsinfo/trendsinfo?id='+v.commid)" class="pinglun" v-if="v.pllxr">
						<text>{{v.pllxr}}：</text>{{v.plcontent}}
					</view>
				</view>
				<view class="bottom" v-if="!addUser">
					<view class="bottom_box">
						<view class="button" @click="link('/comm/addtrends/addtrends?id='+id)">发表动态</view>
						<view class="button" @click="tgShow = true">我要推广</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 加入 -->
		<view class="content_bottom" v-if="isUser">
			<!-- <view class="button" @click="link('/comm/addtrends/addtrends')">创建通讯录</view> -->
			<view class="button" @click="link('/comm/apply/apply?id='+id)">我要加入</view>
		</view>
		<!-- 删除帖子 -->
		<view class="setBox" v-if="setShow">
			<view class="bj" @click="setShow = false"></view>
			<view class="box">
				<view class="list" @click="isDt('2')">删帖并剔除成员</view>
				<view class="list" @click="isDt('1')">删除</view>
				<view class="list" @click="setShow = false">取消</view>
			</view>
		</view>
		<!-- 推广弹框 -->
		<view class="tgBox" v-if="tgShow">
			<view class="bj" @click="tgShow = false"></view>
			<view class="box">
				<image mode="widthFix" :src="tgImg"></image>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref,nextTick
	} from 'vue'
	import {
		homeApi
	} from "@/api/index"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		link,getTuiGuang,getQrurl
	} from '@/utils/utils.js'
	onLoad((open) => {
		if(open.id){
			id.value = open.id
		}
		if (open.scene) {
			let canshu = getQrurl(open.scene)
			id.value = canshu.txlid
		}
		getData()
		getTuiGuang(id.value).then((res)=>{
			tgImg.value = res
		})
		nextTick(()=>{loadShow.value=true})
	})
	onShow(()=>{
		if(loadShow.value){
			sousuo()
		}
	})
	const loadShow = ref(false)
	// 获取推广图
	const tgImg = ref('')
	
	const isUser = ref(true)
	const id = ref('')
	const addUser = ref(false)
	const tab = ref(['成员', '社区'])
	const istab = ref(0)
	
	const searchkey = ref('')
	const setTab = (index) => {
		istab.value = index
		newList.value = []
		isonload.value = true
		page.value = 1
		hasMore.value = true
		isLoad.value = false
		searchkey.value = ''
		getData()
	}
	const sousuo = ()=>{
		newList.value = []
		isonload.value = true
		page.value = 1
		hasMore.value = true
		isLoad.value = false
		getData()
	}
	const tel = (tel) => {
		if (tel == '') {} else {
			uni.makePhoneCall({
				phoneNumber: tel
			});
		}
	}
	const setShow = ref(false)
	const setIndex = ref('')
	const showSet = (index) => {
		setShow.value = true
		setIndex.value = index
	}
	const tgShow = ref(false)

	// 获取内容
	const info = ref({})
	const newList = ref([])
	const isonload = ref(true)
	const pageSize = ref(20)
	const page = ref(1)
	const hasMore = ref(true)
	const isLoad = ref(false)
	const getData = async () => {
		if (istab.value == '0') {
			if (isLoad.value) return false
			if (!hasMore.value) return false
			isLoad.value = true
			let data = {
				do: 'txldetail',
				txlid: id.value,
				searchkey:searchkey.value,
				PageNo: page.value,
				PageSize: pageSize.value,
			}
			let res = await homeApi.publicGet(data)
			let list = []
			let infoData = {}
			for (let i = 0; i < res.columns.length; i++) {
				if (res.columns[i].name == 'txldetail') {
					infoData = res.columns[i]
					list = res.columns[i].items ? res.columns[i].items : []
				}
			}
			if (isonload.value) {
				info.value = infoData
				isonload.value = false
				if (info.value.iamhere == '1') {
					isUser.value = false
				}
				uni.setNavigationBarTitle({
					title: info.value.txlname
				})
			}

			let hasmore = list.length === pageSize.value
			list = newList.value.concat(list)
			hasMore.value = hasmore
			isLoad.value = false
			page.value = page.value + 1
			newList.value = list
		}else{
			if (isLoad.value) return false
			if (!hasMore.value) return false
			isLoad.value = true
			let data = {
				do: 'txlcomm',
				txlid: id.value,
				PageNo: page.value,
				PageSize: pageSize.value,
			}
			let res = await homeApi.publicGet(data)
			let list = []
			for (let i = 0; i < res.columns.length; i++) {
				if (res.columns[i].name == 'txlcomm') {
					list = res.columns[i].items ? res.columns[i].items : []
				}
			}
			let hasmore = list.length === pageSize.value
			list = newList.value.concat(list)
			hasMore.value = hasmore
			isLoad.value = false
			page.value = page.value + 1
			newList.value = list
		}
	}

	// 加好友
	const userIndex = ref(0)
	const isadd = (index) => {
		userIndex.value = index
		uni.showModal({
			content: '是否确认交换名片申请加好友？',
			success: (e) => {
				if (e.confirm) {
					postUser()
				}
			}
		})
	}
	const postUser = async () => {
		let data = {
			do: 'txladdfriend',
			txlid: id.value,
			fuid: newList.value[userIndex.value].userid
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txladdfriend') {
				if (res.columns[i].statuscode == '200') {
					uni.showToast({
						title: res.columns[i].message,
						icon: 'none',
						duration: 2000
					});
					newList.value[userIndex.value].canaddmyfriend = 'no'
				} else {
					uni.showToast({
						title: res.columns[i].message,
						icon: 'none',
						duration: 2000
					});
				}
			}
		}
	}
	// 删除动态
	const deleIndex = ref('')
	const isDt = (type)=>{
		if(type=='1'){
			uni.showModal({
				content: '确认要删除这条动态吗？',
				success: (e) => {
					if (e.confirm) {
						deleDt('txldeletedynamic')
					}
				}
			})
		}else{
			uni.showModal({
				content: '确认要删帖并剔除成员吗？',
				success: (e) => {
					if (e.confirm) {
						deleDt('txldeletedynamicdeluser')
					}
				}
			})
		}
	}
	const deleDt = async(dos)=>{
		let data = {
			delcommid: newList.value[setIndex.value].commid
		}
		let res = await homeApi.publicPost(data,dos)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == dos) {
				if (res.columns[i].statuscode == '200') {
					uni.showToast({
						title: res.columns[i].message,
						icon: 'none',
						duration: 2000
					});
					newList.value.splice(deleIndex.value, 1)
					setShow.value = false
				} else {
					uni.showToast({
						title: res.columns[i].message,
						icon: 'none',
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;

		&_top {
			width: 100%;
			position: relative;

			&_bj {
				width: 100%;
				display: flex;
			}

			&_box {
				position: absolute;
				width: 100%;
				height: calc(100% - 100rpx);
				padding-bottom: 100rpx;
				left: 0;
				top: 0;

				&_admin {
					width: calc(100% - 60rpx);
					padding: 30rpx;
					text-align: right;
					font-size: 28rpx;
					color: #fff;
				}

				&_name {
					font-size: 38rpx;
					font-weight: bold;
					color: #fff;
					text-align: center;
				}

				&_text {
					font-size: 28rpx;
					color: #fff;
					text-align: center;
					margin-top: 10rpx;
				}

				&_bottom {
					width: calc(100% - 60rpx);
					height: 100rpx;
					padding: 0 30rpx;
					background: #fff;
					border-radius: 15px 15px 0 0;
					position: absolute;
					bottom: 0;
					left: 0;
					border-bottom: 2px solid #f5f6fa;
					display: flex;
					align-items: center;

					.nav {
						height: 100%;
						padding-left: 20rpx;
						padding-right: 20rpx;
						border-bottom: 4rpx solid #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 32rpx;
						font-weight: bold;
					}

					.nav.is {
						color: #e94f06;
						border-color: #e94f06;
					}
				}
			}
		}

		&_box {
			flex: 1;
			width: 100%;

			&_cy {
				height: calc(100% - 100rpx);
				padding-bottom: 100rpx;
				display: flex;
				flex-direction: column;

				&_sousuo {
					width: calc(100% - 60rpx);
					margin: 0 auto;
					height: 90rpx;
					background: #f5f6fa;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 30px;
					margin-top: 20px;

					image {
						width: 40rpx;
						height: 40rpx;
					}

					input {
						width: calc(100% - 120rpx);
						margin-right: 20rpx;
						font-size: 32rpx;
					}
				}

				&_list {
					width: 100%;
					display: flex;
					flex-direction: column;

					.list {
						width: 100%;

						.user {
							width: calc(100% - 60rpx);
							margin: 0 auto;
							padding-top: 30rpx;
							padding-bottom: 30rpx;
							display: flex;
							align-items: center;
							border-bottom: 1px solid #f5f6fa;

							.userimg {
								width: 120rpx;
								height: 120rpx;
								border-radius: 100%;
							}

							.right {
								display: flex;
								align-items: center;
								justify-content: space-between;
								flex: 1;
								margin-left: 20rpx;

								.news {
									flex: 1;

									.name {
										width: 100%;
										color: #999;
										font-size: 28rpx;

										text {
											color: #333;
											font-size: 32rpx;
											font-weight: bold;
											margin-right: 10rpx;
										}
									}

									.text {
										margin-top: 10rpx;
										color: #666;
										font-size: 30rpx;
									}
								}

								.tab {
									display: flex;

									image {
										width: 50rpx;
										height: 50rpx;
										margin-left: 20rpx;
									}
								}
							}
						}

						.bottom {
							width: 100%;
							height: 80rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							border-bottom: 1px solid #f5f6fa;

							.tab1 {
								margin-left: 30rpx;
								display: flex;
								align-items: center;
								justify-content: center;

								image {
									width: 50rpx;
									height: 50rpx;
								}

								text {
									font-size: 28rpx;
									color: #666;
									margin-left: 10rpx;
								}
							}

							.tab2 {
								padding-left: 15rpx;
								padding-right: 15rpx;
								height: 55rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 8px 0 0 8px;
								background: #e94f06;
								color: #fff;
								font-size: 28rpx;
							}
						}
					}
				}

				&_bottom {
					width: 100%;
					height: 100rpx;
					position: fixed;
					bottom: 0;
					left: 0;

					.button {
						width: 100%;
						height: 100rpx;
						background: #e94f06;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 38rpx;
					}
				}
			}

			&_sq {
				width: 100%;
				height: calc(100% - 100rpx);
				padding-bottom: 100rpx;
				overflow-y: auto;
				position: relative;

				.list {
					width: calc(100% - 60rpx);
					padding: 30rpx;
					display: flex;
					flex-direction: column;
					border-bottom: 1px solid #f5f6fa;

					.user {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.userimg {
							width: 120rpx;
							height: 120rpx;
							border-radius: 100%;
						}

						.right {
							width: calc(100% - 140rpx);
							display: flex;
							align-items: center;
							justify-content: space-between;

							.news {
								width: calc(100% - 120rpx);

								.name {
									font-size: 28rpx;
									color: #666;

									text {
										font-size: 32rpx;
										font-weight: bold;
										color: #333;
										margin-right: 10rpx;
									}
								}

								.text {
									font-size: 28rpx;
									color: #666;
									margin-top: 10rpx;
								}
							}

							.set {
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 28rpx;

								text {
									margin-left: 5rpx;
								}
							}
						}
					}

					.bottomtext {
						width: 100%;
						margin-top: 20rpx;
						font-size: 28rpx;
						color: #666;
					}
					.pinglun{
						font-size: 24rpx;
						margin-top: 15rpx;
						color: #666;
						text{
							color: #09F;
						}
					}
				}

				.bottom {
					width: 100%;
					height: 100rpx;
					position: fixed;
					left: 0;
					bottom: 0;

					&_box {
						width: 100%;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button {
							flex: 1;
							color: #fff;
							height: 100%;
							background: #e94f06;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 38rpx;
						}

						.button:nth-child(1) {
							border-right: 1px solid #fff;
						}
					}
				}
			}
		}

		&_bottom {
			width: 100%;
			height: 100rpx;
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
			left: 0;
			bottom: 0;

			.button {
				flex: 1;
				color: #fff;
				height: 100%;
				background: #e94f06;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 38rpx;
			}

			// .button:nth-child(1) {
			// 	background: #fff;
			// 	color: #e94f06;
			// }
		}

		.setBox {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;

			.bj {
				width: 100%;
				height: 100%;
				position: absolute;
				background: rgba(0, 0, 0, .2);
			}

			.box {
				width: 100%;
				height: auto;
				background: #fff;
				position: absolute;
				bottom: 0;
				left: 0;

				.list {
					width: 100%;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom: 1px solid #ddd;
					font-size: 32rpx;
				}

				.list:nth-last-child(1) {
					color: #f00;
					border-bottom: none;
				}
			}
		}

		.tgBox {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 999;

			.bj {
				width: 100%;
				height: 100%;
				position: absolute;
				background: #000;
			}

			.box {
				width: 100%;
				position: absolute;

				image {
					width: 100%;
				}
			}
		}
	}
</style>